<template>
  <div class="container" style="width: 99%;margin-top: -25px;">
    <!-- 工具栏 -->
    <div class="toolbar" style="float: left;padding-top: 10px;padding-left: 15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <blog-button :label="$t('action.search')" perms="sys:menu:view" type="primary" @click="findTreeData(null)"/>
        </el-form-item>
        <el-form-item>
          <blog-button :label="$t('action.add')" perms="sys:menu:add" type="primary" @click="handleAdd"/>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格内容 -->
    <el-table :data="tableTreeData" stripe size="mini" style="width: 100%" v-loading="loading" element-loading-text="$t('action.loading')">
      <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
      </el-table-column>
      <table-tree-column
        prop="name" header-align="center" treeKey="id" width="150" label="名称">
      </table-tree-column>
      <el-table-column header-align="center" align="center" label="图标">
        <template slot-scope="scope">
          <i :class="scope.row.icon || ''"></i>
        </template>
      </el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
      </el-table-column>
      <el-table-column
        prop="url" header-align="center" align="center" width="150"
        :show-overflow-tooltip="true" label="菜单URL">
      </el-table-column>
      <el-table-column
        prop="perms" header-align="center" align="center" width="150"
        :show-overflow-tooltip="true" label="授权标识">
      </el-table-column>
      <el-table-column
        prop="orderNum" header-align="center" align="center" label="排序">
      </el-table-column>
      <el-table-column
        fixed="right" header-align="center" align="center" width="180" :label="$t('action.operation')">
        <template slot-scope="scope">
          <blog-button :label="$t('action.edit')" perms="sys:menu:edit" @click="handleEdit(scope.row)"/>
          <blog-button :label="$t('action.delete')" perms="sys:menu:delete" type="danger" @click="handleDelete(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" width="40%" :visible.sync="dialogVisible" :colse-on-click-model="false">
      <el-form label-width="80px" :model="dataForm" :rules="dataRule" ref="dataForm"
       @keyup.enter.native="submitForm()" :size="size" style="text-align: left">
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio v-for="(type, index) in menuTypeList" :label="index" :key="index">{{type}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="menuTypeList[dataForm.type] + '名称'" prop="name">
          <el-input v-model="dataForm.name" :placeholder="menuTypeList[dataForm.type] + '名称'"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentName">
          <popup-tree-input
           :data="popupTreeData" :props="popupTreeProps" :prop="dataForm.parentName==null?'根节点':dataForm.parentName"
           :nodeKey="'' + dataForm.parentId" :currentChangeHandle="handleTreeSelectChange">
          </popup-tree-input>
        </el-form-item>
        <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
          <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
          <el-input v-model="dataForm.perms" placeholder="如：sys:user:add, sys:user:edit,sys:user:delete"></el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.type !== 2" label="排序编号" prop="orderNum">
          <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序编号"></el-input-number>
        </el-form-item>
        <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
          <el-row>
            <el-col :span="22">
              <!-- <el-popover rel="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-menu__icon-popover">
                <div class="mod-menu__icon-list">
                  <el-button v-for="(item,index) in dataForm.iconList"
                  :key="index"
                  @click="iconActiveHandle(item)"
                  :class="{ 'is-active':item === dataForm.icon}">
                    <icon-svg :name="item"></icon-svg>
                  </el-button>
                </div>
              </el-popover> -->
              <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="false"
                        placeholder="菜单图标名称（如：fa fa-home fa-lg）" class="icon-list__input">
              </el-input>
            </el-col>
            <el-col :span="2" class="icon-list__tips">
              <fa-icon-tooltip/>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取 消</el-button>
        <el-button :size="size" type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import BlogButton from "@/views/Core/BlogButton";
  import TableTreeColumn from "@/views/Core/TableTreeColumn";
  import PopupTreeInput from "@/components/PopupTreeInput";
  import FaIconTooltip from "@/components/FaIconTooltip";
  import ElFormItem from "element-ui/packages/form/src/form-item";
  import ElInput from "element-ui/packages/input/src/input";
  import ElPopover from "element-ui/packages/popover/src/main";
  import ElButton from "element-ui/packages/button/src/button";
  export default {
    components:{
      ElButton,
      ElPopover,
      ElInput,
      ElFormItem,
      BlogButton,
      TableTreeColumn,
      PopupTreeInput,
      FaIconTooltip
    },
    data() {
      return {
        size: "small",
        loading: false,
        filters: {
          name: ""
        },
        tableTreeData: [],
        dialogVisible: false,
        menuTypeList: ["目录", "菜单", "按钮"],
        dataForm: {
          id: 0,
          type: 1,
          name: "",
          parentId: 0,
          parentName: "",
          url: "",
          perms: "",
          orderNum: 0,
          icon: "",
          iconList: []
        },
        dataRule: {
          name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }]
        },
        popupTreeData: [],
        popupTreeProps: {
          label: "name",
          children: "children"
        }
      };
    },
    methods:{
      //获取数据
      findTreeData: function () {
        this.loading = true;
        this.$api.menu.findMenuTree().then(res => {
          this.tableTreeData = res.data;
          this.popupTreeData = this.getParentMenuTree(res.data);
          this.loading = false;
        });
      },
      getParentMenuTree: function (tableTreeData) {
        let parent = {
          parentId: 0,
          name: "顶级菜单",
          children: tableTreeData
        };
        return [parent];
      },
      handleAdd: function () {
        this.dialogVisible = true;
        this.dataForm = {
          id: 0,
          type: 1,
          typeList:["目录","菜单","按钮"],
          name: "",
          parentId: 0,
          parentName: "",
          url: "",
          perms: "",
          orderNum: 0,
          icon: "",
          iconList: []
        }
      },
      handleEdit: function (row) {
        this.dialogVisible=true
        Object.assign(this.dataForm, row);
      },
      handleDelete: function (row) {
        this.$confirm("确认删除选中记录吗？", "提示", {
          type: "warning"
        }).then(() => {
          let params = this.getDeleteIds([], row);
          this.$api.menu.batchDelete(params).then(res => {
            this.findTreeData();
            this.$message({ message: "删除成功", type: "success" });
          });
        });
      },
      getDeleteIds: function (ids,row) {
        ids.push({ id: row.id });
        if (row.children != null) {
          for (let i = 0, len = row.children.length; i < len; i++) {
            this.getDeleteIds(ids, row.children[i]);
          }
        }
        return ids;
      },
      submitForm: function () {
        this.$refs['dataForm'].validate((valid) => {
          if(valid) {
            this.$confirm('确认提交吗？','提示',{}).then(() => {
              this.editLoading = true
              let params = Object.assign({},this.dataForm)
              this.$api.menu.save(params).then((res) => {
                if(res.code == 200) {
                  this.$message({message: '操作成功',type: 'success'})
                } else {
                  this.$message({message: '操作失败，' + res.msg, type: 'error'})
                }
                this.loading = false
                this.$refs['dataForm'].resetFields()
                this.dialogVisible = false
                this.findTreeData()
              })
            })
          }
        })
      },
      handleTreeSelectChange: function (data, node) {
        this.dataForm.parentId = data.id;
        this.dataForm.parentName = data.name;
      }
    },
    mounted() {
      this.findTreeData();
    }
  };
</script>
<style>

</style>
